<template>
  <div class="loginBox">
    <div class="title">
      <p>品质消费 · 美好生活</p>
      <p style="font-size: 19px">发现中国好品质</p>
    </div>
    <van-form >
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" @click="denglu" 
          >登录</van-button>
        <br />
        <van-button round block type="info" to="register" class="login"
          >注册</van-button
        >
      </div>
    </van-form>
    <span style="font-size:14px;float:right;margin-right:40px" @click="tiao" >忘记密码?</span>
  </div>
</template>
<script>

import{getLogin} from "../../api/index"
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
   async denglu() {
      let obj ={
        username:this.username,
        password:this.password,
      }
      let {data:{token,userId},meta:{msg,status}} = await getLogin(obj);
      if(status==200){
        this.$notify({ type: 'success', message: msg });
        window.localStorage.setItem("myToken",token);
        window.localStorage.setItem("username",this.username)
        window.localStorage.setItem("userId",userId);
        this.$router.push({path:"/home"})
      }else{
        this.$notify({ type: 'warning', message: msg });
      }
    },
    tiao(){
      this.$router.push({path:"/forgetPassword"});
    }
  },
};
</script>

<style lang="less" scoped>
.loginBox {
  .title {
    text-align: center;
    p {
      margin-top: 50px;
      font-size: 38px;
    }
  }
  .van-form {
    margin-top: 50px;
    div {
        input{
            margin: 100px 0;
        }
      .van-button {
        background-color: rgba(42, 131, 78, 1);
        color: #fff;
        border: rgba(42, 131, 78, 1);
      }
      .login {
        color: #000;
        background-color: #d8d8d8;
      }
    }
  }
}
</style>